import axios from 'axios'
import { React, useEffect,useState} from 'react'
import { useLocation,useNavigate} from 'react-router-dom'
import './search.css'
import InterIP from '../../IP/IP'
export default function Search() {
    const search_text = useLocation();
    const [searchData,setSearchData]  =useState([]);
    const navigate = useNavigate();
    useEffect(() => {
        let IP = InterIP().props.children;
        axios.post('http://' + IP + ':3000/index/search', {
            product_name: search_text.state,
        }).then((res) => {
            setSearchData((searchData)=>searchData = res.data)
        })
    }, [search_text.state]);
    function productDetails(id) {
        return () => {
          localStorage.productId = id;
          navigate('/home/productDetails')
        }
      }
    return (
        <div>
            <ul className="lfy_index_friday_total_list">
                {searchData.map((data) =>
                    <li key={data.product_id} className="lfy_index_friday_total_list_li">
                        <div className="lfy_index_friday_total_list_li_img" onClick={productDetails(data.product_id)}>
                            <img src={data.product_img} alt="" />
                        </div>
                        <div className="lfy_index_friday_total_list_li_div">
                            <h4 className="lfy_index_friday_total_list_li_div_h4">{data.product_name}</h4>
                            <h5 className="lfy_index_friday_total_list_li_div_h5">{data.product_number}{data.product_specification}</h5>
                            <h6 className="lfy_index_friday_total_list_li_div_h6">
                                <span>现价:￥{data.product_price}</span>
                                <span>原价:￥{data.product_oldPrice}</span>
                            </h6>
                        </div>
                    </li>
                )}
            </ul>
        </div>
    )
}
